<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:43
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage back>
    <template #title-suffix>
      <NTag class="ml-12" type="warning">
        {{ route.query.deliveryOrderNum }}
      </NTag>
    </template>
    <n-space vertical>
      <n-tabs type="line" size="medium" :default-value="orderType" @update:value="handleUpdateValue">
        <n-tab-pane name="deliveryOrder" tab="配送单详情">
          <n-space wrap :size="[32, 16]" class="sale-header">
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                配送单号
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.orderNum" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                销售单号
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="saleOrder.orderNum" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                状态
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.deliveryStatusName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                配送类型
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.deliveryTypeName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                接单人
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.confirmUserName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                创建时间
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.createTime" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                顾客
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.userName" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                顾客手机号
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.userPhone" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                地址
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.deliveryAddress" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                经度
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.deliveryAddressLatitude" disabled />
              </div>
            </div>
            <div class="flex items-center">
              <label class="flex-shrink-0" style="width: 80px">
                纬度
              </label>
              <div style=" width: 200px" class="flex-shrink-0">
                <n-input type="text" :value="deliverOrder.deliveryAddressLongitude" disabled />
              </div>
            </div>
          </n-space>
          <n-data-table :columns="orderLogColumns" :data=" orderLog " bordered="true" />
        </n-tab-pane>
        <n-tab-pane name="errandOrder" tab="跑腿单详情">
          <n-card class="w-100%" title="达达跑腿" segmented>
            <template #header-extra>
              <div class="flex items-center">
                <NButton type="error" @click=" openModal1 ">
                  <i class="i-material-symbols:delete-outline mr-4 text-18" />
                  跑腿询价
                </NButton>
                <NButton class="ml-12" type="primary" @click="cancelErrandOrder">
                  <i class="i-line-md:confirm-circle mr-4 text-18" />
                  取消跑腿
                </NButton>
                <NButton class="ml-12" type="primary">
                  <i class="i-line-md:confirm-circle mr-4 text-18" />
                  骑手位置
                </NButton>
                <NButton class="ml-12" type="primary">
                  <i class="i-line-md:confirm-circle mr-4 text-18" />
                  查询状态
                </NButton>
              </div>
            </template>
            <n-descriptions class="w-100% pl-100 pr-100" label-placement="left" :column=" 3 ">
              <n-descriptions-item label="状态">
                {{ errandOrder.errandOrderStatusName }}
              </n-descriptions-item>
              <n-descriptions-item label="跑腿费">
                {{ errandOrder.deliveryFee }}
              </n-descriptions-item>
              <n-descriptions-item label="距离">
                {{ errandOrder.errandDistance }}米
              </n-descriptions-item>
              <n-descriptions-item label="骑手姓名">
                {{ errandOrder.transporterName }}
              </n-descriptions-item>
              <n-descriptions-item label="骑手电话">
                {{ errandOrder.transporterPhone }}
              </n-descriptions-item>
            </n-descriptions>
            <n-divider class="mb-0! mt-12!">
              <p class="text-14 opacity-60">
                跑腿单日志
              </p>
            </n-divider>
            <n-data-table :columns="orderLogColumns" :data=" orderLog " bordered="true" />
          </n-card>
        </n-tab-pane>
      </n-tabs>
    </n-space>
  </CommonPage>
  <MeModal ref="$modal1">
    <MeQueryItem label="距离" :label-width=" 40 ">
      <n-input v-model:value=" errandOrder.errandDistance " type="text">
        <template #suffix>
          米
        </template>
      </n-input>
    </MeQueryItem>
    <MeQueryItem label="费用" :label-width=" 40 ">
      <n-input v-model:value=" errandOrder.deliveryFee " type="text">
        <template #suffix>
          元
        </template>
      </n-input>
    </MeQueryItem>
  </MeModal>
</template>

<script setup>
import { NButton } from 'naive-ui'
import api from './api'
import { MeModal, MeQueryItem } from '@/components'
import { useModal } from '@/composables'

defineOptions({ name: 'SaleOrderDetails' })
const [$modal1, okLoading1] = useModal()
const route = useRoute()
const orderType = route.query.orderType // 订单类型
const saleOrder = ref({}) // 订单详情
const deliverOrder = ref({}) // 订单详情
const saleOrderItemData = ref([]) // 订单项详情
const orderLog = ref([])// 订单日志
const errandOrder = ref({})// 跑腿单订单详情
// 生命周期
onMounted(async () => {
  // let orderId = route.query.orderId;
  if (orderType === 'deliveryOrder') {
    deliverOrder.value = await api.getDeliverOrderVO(route.query.deliveryOrderId)
    saleOrder.value = deliverOrder.value.orderPO
    saleOrderItemData.value = saleOrder.value.items
  }
  else if (orderType === 'errandOrder') {
    // todo
  }
  // 订单日志
  orderLog.value = await api.getDeliveryOrderLog(route.query.deliveryOrderId)
})
// 订单项详情 表头
const orderLogColumns = [
  {
    title: '时间',
    key: 'createTime',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '类型',
    key: 'orderBizType',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '行为',
    key: 'actionName',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '行为结果',
    key: 'actionResult',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '备注',
    key: 'remark',
    align: 'center',
    titleAlign: 'center',
  },
]
// tab 点击回调
async function handleUpdateValue(value) {
  // 销售单
  if (value === 'deliveryOrder' && !(saleOrder.value)) {
    // 配送单
  }
  else if (value === 'errandOrder') {
    if (errandOrder.value.id) {
      return
    }
    // 跑腿单
    errandOrder.value = await api.getErrandOrder(deliverOrder.value.errandId)
  }
  else if (value === 'orderDetails' && !(deliverOrder.value)) {
    // 销售订单
  }
}
// 跑腿询价
async function openModal1() {
  const dadaQueryFee = await api.getDadaQueryFee(deliverOrder.value.id)
  errandOrder.value = dadaQueryFee
  $modal1.value?.open({
    title: '达达询价',
    width: '350px',
    okText: '确定下单',
    cancelText: '取消下单',
    async onOk() {
      okLoading1.value = true
      $message.loading('正在提交...', { key: 'modal1' })
      await api.getDadaQueryFeeThen(errandOrder.value)
      okLoading1.value = false
      $message.success('提交成功', { key: 'modal1' })
      return true // 默认关闭弹窗，返回false可让弹窗不关闭
    },
    onCancel(message) {
      $message.info(message ?? '已取消')
    },
  })
}
// 取消跑腿
async function cancelErrandOrder() {
  errandOrder.value.cancelCode = '10000'
  errandOrder.value.cancelReason = '其他'
  await api.cancelErrandOrder(errandOrder.value)
  errandOrder.value.errandOrderStatus = 5
}
</script>

<style>
.sale-header {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(255 255 255 / var(--un-bg-opacity));
  border: 1px solid rgb(205 216 217);
  border-radius: 3px; /* 圆角半径 */
}
</style>
